<template>
  <div class="toolsSetof">
    <crumb :list="['知识库服务 ', '公共工具集']"></crumb>
    <div class="state">
      <conditionalQuery @search="search" :state="false" :filter="false"></conditionalQuery>
    </div>
    <div class="fileTable">
      <div class="fristRow">
        <div class="title">工具集列表</div>
        <div class="addFolder" @click="addFolder"><i class="iconfont icon-open-folder"></i>新建工具集</div>
      </div>
      <div style="height: calc(100% - 100px)">
        <el-table
          ref="multipleTable"
          :data="sliceTableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="100%"
          :stripe="true"
          class="costomTable">
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="tkName" label="工具集名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="folderName" @click="$emit('changeTools', scope.row)">
                <img style="margin-right: 5px" src="@/assets/image/icon/wjk.svg" alt="" />{{ scope.row.tkName }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="esc" label="简介" show-overflow-tooltip /> -->
          <el-table-column prop="gmtCreated" label="创建时间" show-overflow-tooltip />
          <el-table-column prop="realName" label="创建人" show-overflow-tooltip />
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="operateGroup">
                <div @click="handlePrompt(scope.row)"><i class="iconfont icon-bianji" />prompt</div>
                <div @click="handelShots(scope.row)"><i class="iconfont icon-bianji" />shots</div>
                <!-- <div @click="operate(scope.row)"><i class="iconfont icon-bianji" />编辑</div> -->
                <div @click="deleteFile(scope.row)"><i class="el-icon-delete" style="margin-right: 5px" />删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pageInation :total="total" @handleCurrentChange="handleCurrentChange"></pageInation>
      </div>
    </div>
    <parentDialog :title="dialogTitle" :visible.sync="dialogVisible" v-if="dialogVisible" :height="dialogHeight">
      <!-- <div v-if="dialogTitle == '添加工具集' || dialogTitle == '修改工具集'" class="addToolsSetof">
        <div class="item">
          <div class="lable">名称：</div>
          <el-input v-model="dialogFrom.tkName" placeholder="请输入内容"></el-input>
        </div>
      </div> -->
      <el-upload
        v-if="dialogTitle == '添加工具集' || dialogTitle == '修改工具集'"
        class="upload-demo"
        drag
        :on-remove="handleRemove"
        :on-change="handleChange"
        :file-list="fileList"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :auto-upload="false"
        action="">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="upload_tip_tool" @click="templateUpload" slot="tip">只能上传json文件（<span>点击下载模板</span>）</div>
      </el-upload>

      <shot v-else-if="dialogVisible && dialogTitle.includes('shot')" :tkName="toolInfo.tkName" :toolInfo="toolInfo"></shot>
      <prompt
        v-else-if="dialogVisible && dialogTitle.includes('Prompt')"
        @closeDialog="dialogVisible = false"
        :tkName="toolInfo.tkName"
        :tkId="toolInfo.id"
        :toolInfo="toolInfo"></prompt>
      <!-- <shot v-else-if="dialogTitle == '添加shot'" :toolInfo="toolInfo"></shot>
      <prompt v-else-if="dialogTitle == 'Prompt'" :tkName="toolInfo.tkName" :toolInfo="toolInfo"></prompt> -->
      <div class="btn" v-if="dialogTitle == '添加工具集' || dialogTitle == '修改工具集'">
        <el-button size="medium" type="primary" @click="submitFun">提交</el-button>
        <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      </div>
    </parentDialog>
  </div>
</template>
<script>
import { toolkitList, toolkitAdd, toolkitDelete, toolkitUpdate, toolkitRegistry } from "@/api/tools.js"
import conditionalQuery from "@/components/conditionalQuery/index.vue" // 查询参数
import { mixins } from "@/components/mixin/tools"
import crumb from "@/components/pageInation/crumb.vue"
import { downLoad, delay } from "@/utils/index"

export default {
  components: { conditionalQuery, crumb },
  mixins: [mixins],
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sliceTableData: [],
      dialogFrom: {
        tkName: "",
      },
      params: {
        name: "",
      },
      toolInfo: {},
      dialogTitle: "",
      fileList: [],
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    // 获取文件列表
    getTableList() {
      toolkitList({
        size: this.pageSize,
        page: this.currentPage,
        name: this.params.name,
      })
        .then(result => {
          console.log(result)
          this.sliceTableData = result.data.records
          this.total = result.data?.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 提交
    submitFun() {
      console.log(this.tableData)
      if (this.dialogTitle == "添加工具集") this.upLoad()
      else if (this.dialogTitle == "修改工具集") this.modify()
      else if (this.dialogTitle == "修改Prompt") this.modify()
      else if (this.dialogTitle == "修改shot") this.modify()
    },
    // 添加知识库
    // createKnowledgeFun() {
    //   if (!this.dialogFrom.tkName) {
    //     this.$message.error("文件集名称不能为空");
    //     return;
    //   }
    //   toolkitAdd({
    //     tkName: this.dialogFrom.tkName,
    //   })
    //     .then((result) => {
    //       if (result.code == 200) {
    //         this.$message.success(result.msg);
    //         this.dialogVisible = false;
    //         this.getTableList();
    //       }
    //     })
    //     .catch((err) => {
    //       this.dialogVisible = false;
    //     });
    // },
    // 模板下载
    templateUpload() {
      let url = "/static/file/toolKitJsonTemplate.json"
      downLoad("toolJsonTemplate.json", url)
    },
    // 修改知识库提交
    async modify() {
      if (!this.dialogFrom.tkName) {
        this.$message.error("文件集名称不能为空")
        return
      }
      toolkitUpdate({
        id: this.dialogFrom.id,
        tkName: this.dialogFrom.tkName,
        info: this.dialogFrom.dsc,
      })
        .then(result => {
          if (result.code == 200) {
            this.$message.success("修改成功！")
            this.getTableList()
          }
          this.dialogVisible = false
        })
        .catch(err => {
          this.dialogVisible = false
          console.log(err)
        })
    },
    // 分页事件
    handleCurrentChange(item) {
      this.currentPage = item.currentPage
      this.pageSize = item.pageSize
      this.getTableList()
    },
    search(obj) {
      let { fileName } = obj
      this.currentPage = 1
      this.params.name = fileName
      this.getTableList()
    },
    // 删除
    async deleteFile(row) {
      this.$confirm("确定删除?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        toolkitDelete({ id: row.id })
          .then(result => {
            if (result.code == 200) {
              this.$message.success(result.msg)
              this.getTableList()
            }
          })
          .catch(err => {})
      })
    },
    // 编辑
    operate(row) {
      this.dialogHeight = "45%"
      this.dialogTitle = "修改工具集"
      this.dialogVisible = true
      this.dialogFrom = { ...row }
    },
    addFolder() {
      this.dialogHeight = "45%"
      this.dialogTitle = "添加工具集"
      this.dialogVisible = true
      this.dialogFrom = {
        tkName: "",
        dsc: "",
      }
    },

    handleRemove(file, fileList) {
      this.fileList = fileList
      console.log(file, fileList)
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    handleExceed(file, fileList) {
      this.$message.warning(`仅支持单文件上传`)
    },

    upLoad() {
      console.log(this.fileList)
      if (!this.fileList.length) {
        this.$message.warning("请先选择文件")
        return
      }
      let fileTypeArr = ["json"]
      let formatData = new FormData()
      let bool = false
      this.fileList.forEach(item => {
        if (fileTypeArr.includes(item.name.split(".").at(-1))) {
          formatData.append("file", item.raw)
        } else {
          bool = true
        }
      })
      if (bool) {
        this.$message.warning("仅支持json类型文件")
        return
      }
      // formatData.append("tools", this.toolsSetofInfo.tkName)
      toolkitRegistry(formatData)
        .then(result => {
          console.log(result)
          if (result.code == 200) {
            this.$message.success(result.msg)
            this.getTableList()
            this.dialogVisible = false
            this.fileList = []
          } else {
            this.$message.warning(result.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.toolsSetof {
  width: 100%;
  height: 100%;
  background: #e6eaf0;
  .goBack {
    margin-bottom: 20px;
    text-align: right;
    cursor: pointer;
  }
  .state {
    background: #fff;
    border-radius: 8px;
    // display: flex;
    // align-items: center;
    .params {
      display: flex;
      align-items: flex-end;
      text-align: left;
      padding: 10px 20px;
      .item {
        margin-right: 20px;
        .lable {
          // line-height: 30px;
          margin-bottom: 8px;
          margin-left: 3px;
        }
      }
    }
  }
  .fileTable {
    background: #fff;
    margin-top: 15px;
    padding: 20px;
    border-radius: 8px;
    height: calc(100% - 130px);
    box-sizing: border-box;

    .fristRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(0, 20, 45, 0.05);
      .title {
        font-family: MiSans, MiSans;
        font-weight: 600;
        color: #00142d;
        line-height: 35px;
      }
    }
    .addFolder {
      font-size: 16px;
    }
    // .fristRow {
    //   display: flex;
    //   justify-content: space-between;
    //   line-height: 35px;
    //   padding: 3px 15px;
    //   margin-bottom: 5px;
    //   background: #fff;
    //   border-radius: 8px;
    //   .title {
    //     font-family: MiSans, MiSans;
    //     font-weight: 600;
    //     color: #00142d;
    //     line-height: 24px;
    //   }
    // }

    .operateGroup {
      display: flex;
      .iconfont {
        margin-right: 3px;
      }
      > div {
        margin-right: 15px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    .folderName {
      display: flex;
      align-items: center;
      > img {
        margin-right: 5px;
      }
      :hover {
        color: #409eff;
      }
      cursor: pointer;
    }
  }
  .addToolsSetof {
    .item {
      display: flex;
      margin: 20px 20px;
      align-items: center;
      .lable {
        min-width: 100px;
        text-align: right;
      }
      .el-textarea,
      .el-input {
        width: 80%;
      }
    }
  }
  .btn {
    margin-top: 40px;
  }
  .tableModify {
    height: calc(100% - 80px);
    overflow: auto;
    ::v-deep .content {
      overflow: auto;
    }
    .tabBtn {
      margin-left: 5px;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
    .addRow {
      width: 100%;
    }
  }
  ::v-deep .el-upload-list__item {
    text-align: left;
    padding-left: 180px;
  }
  .upload_tip_tool {
    font-size: 14px;
    text-align: left;
    padding-left: 190px;
    margin-top: 10px;
    > span {
      color: #409eff;
      cursor: pointer;
      :hover {
        transform: scale(1.1);
      }
    }
  }
}
</style>
